<template>
	<view>
		<view style="position:fixed;width: 100%;padding-bottom：30rpx;z-index:10">
			<div style="height: 50rpx;background:#fff"></div>
			<Title :title="title" style="background-color: #fff;" />
		</view>
		<view style="height:130rpx"></view>
		<u-form
			:model="model1"
			ref="uForm"
			class="ml-20 mr-20 formSty"
		>
			<view class="contentBg mt-30">
				<u-form-item
					:border-bottom="false"
					prop="advice"
					:required="true"
					label="投诉内容"
					label-position="top"
					class="titleSty"
				>
				<u-input v-model="model1.advice" type="textarea" placeholder="请输入投诉内容详情" :border="true" height="240" :auto-height="true" class="rounded-18" />
				</u-form-item>
			</view>
			<view class="contentBg mt-30">
				<u-form-item
					:border-bottom="false"
					prop="image"
					:required="true"
					label="上传图片(支持jpeg、jpg、png (大小5m内))"
					label-position="top"
					class="titleSty"
				>
				<u-upload
					:action="action"
					:file-list="fileList1"
					:max-size="imageMaxSize"
					:max-count="max_count"
					:auto-upload="autoUpload"
					:show-upload-list="showUploadList"
					:del-bg-color="delBgColor"
					:del-color="delColor"
					:limit-type="limitType"
					@on-success="onSuccess"
					@on-remove="onRemove"
					:show-progress="false"
					width="150"
					height="150"
				>
				</u-upload>
				</u-form-item>
				<u-form-item
					:border-bottom="false"
					prop="video"
					:required="true"
					label-position="top"
					label="上传视频(支持mp4、rmvb、AVI (大小500m内))"
					class="titleSty"
				>
				 <label slot="label">
					<span style="color: #606366;font-size: 24rpx;">支持mp4、rmvb、AVI (大小500m内)</span>
				  </label>
				  <u-upload
				  	:action="action"
				  	:file-list="fileList2"
				  	:max-count="max_count"
				  	:auto-upload="autoUpload"
				  	:show-upload-list="showUploadList"
				  	:del-bg-color="delBgColor"
				  	:del-color="delColor"
				  	@on-success="onSuccessVideo"
				  	@on-remove="onRemoveVideo"
				  	:show-progress="false"
				  	width="150"
				  	height="150"
				  >
				  </u-upload>
				</u-form-item>
			</view>
		</u-form>
		<view class="empty"></view>
		<view class="footer_btn4">
				<button class="btn_blue" :disabled="btnDis" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import Title from './../components/title.vue'
	import { sendAdvice } from '@/api/user'
	import {
		HTTP_REQUEST_URL,
		IMAGE_MAX_SIZE,
		IMAGE_MAX_COUNT,
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: '投诉建议',
				showTel: false,
				btnDis: false,
				content: '',
				badInfo: '',
				allInfo: {},
				action: HTTP_REQUEST_URL + '/common/upload',
				imageMaxSize: IMAGE_MAX_SIZE,
				imageMaxCount: IMAGE_MAX_COUNT,
				max_count: 3,
				autoUpload: true,
				showUploadList: true,
				delBgColor: '#fa3534',
				delColor: '#ffffff',
				uploadText: this.$t('选择图片'),
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],
				action: 'https://app.gluz.com.cn/api/common/upload',
				show: false,
				fileList1: [],
				fileList2: [],
				fileList: [],
				fileListUp: [],
				columns: [],
				model1: {
					user_id: uni.getStorageSync("user_id"), // 用户id
					advice: '', // 情况说明
					image: '',
					video: ''
				},
				rules: {
					advice: [
						{ 
							required: true, 
							message: '请填写情况说明', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
					image: [
						{ 
							required: true, 
							message: '请上传图片', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
					video: [
						{ 
							required: true, 
							message: '请上传视频', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
				},
			}
		},
		  mounted() {
		  },
		  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		  	onReady() {
		  		this.$refs.uForm.setRules(this.rules);
		  	},
		methods: {
			back() {
					// uni.navigateBack()
					this.cback()
				},
				onSuccess(data, index, lists, name) { // 上传成功
					this.setFromData(lists)
				},   
				onRemove(index, lists, name) {
					this.setFromData(lists)
				},
				setFromData(lists) {
					let formData = [];
					if (lists.length > 0) {
						for (let i = 0; i < lists.length; i++) {
							if (lists[i].response) {
								let temp = {
									url: lists[i].response.data.url
								}
								formData.push(temp)
							} else if (lists[i].url) {
								let temp = {
									url: lists[i].url
								}
								formData.push(temp)
							}
						}
					} else {
						formData = []
					}
					this.model1.image = formData[0].url
				},
				onSuccessVideo(data, index, lists, name) { // 上传成功
					this.setFromDataVideo(lists)
				},   
				onRemoveVideo(index, lists, name) {
					this.setFromDataVideo(lists)
				},
				setFromDataVideo(lists) {
					let formData = [];
					if (lists.length > 0) {
						for (let i = 0; i < lists.length; i++) {
							if (lists[i].response) {
								let temp = {
									url: lists[i].response.data.url
								}
								formData.push(temp)
							} else if (lists[i].url) {
								let temp = {
									url: lists[i].url
								}
								formData.push(temp)
							}
						}
					} else {
						formData = []
					}
					this.model1.video = formData[0].url
				},
				 
				  submit() {
					  this.$refs.uForm.validate(valid => {
							if (valid) {
								this.btnDis = true
								uni.showLoading({
									title: '提交中'
								});
								const that = this;
								that.$u.api.user.sendAdvice({...this.model1}).then(res => {
									if (res == '200') {
										uni.navigateTo({
											url: '/pages/tabbar/newUser/Complain/complainSuccess'
										})
									}
									uni.hideLoading()
									this.btnDis = false
								})
							} else {
								uni.$u.toast('请检查是否有未上传内容')
							}
						})
				  },
		}
	}
</script>

<style lang="less">
	page {
			background: #F6F7FB;
		}
		// /deep/ .u-form {
		// 	margin: 0 30rpx 0;
		// }
		.empty {
			width: 100%;
			height: 200rpx;
		}
		.titleSty {
			color: #262728;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			// padding-top: 34rpx;
			margin-left: 14rpx;
		}
			.formSty {
				padding-bottom: 200rpx;
				/deep/ .u-form-item__body {
					padding: 0;
				}
			}
			.contentBg {
				background-color: #fff;
				padding: 0 24rpx;
				// margin-left: 24rpx;
				// margin-right: 24rpx;
				border-radius: 18px;
				padding-bottom: 35rpx;
				/deep/ .u-form-item__body__right__message {
					margin-left: 0 !important;
				}
				/deep/ .u-icon__icon {
					font-size: 52rpx !important;
				}
				/deep/ .u-border-bottom{
					position: inherit;
				}
				/deep/ .u-add-wrap {
					// display: none !important;
					color: #D9D9D9;
					font-size: 20rpx;
				}
				/deep/ .u-add-tips {
					display: none !important;
				}
			}
			.textareaSty {
				width: 100%;
				height: 226rpx !important;
				border-radius: 18rpx;
				border: 2rpx solid #D8D8D8;
				// background: #F7F7F7;
				margin-top: 24rpx;
			}
			
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_blue{
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
</style>
